<template>
  <div class="option-radio">
    <span style="margin-right:4px">{{ label }}</span>
    <el-checkbox-group v-model="text" size="mini" :min="0" :max="max" @change="valueChange">
      <el-checkbox v-for="item in options" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
    <!-- <el-radio-group v-model="text" :disabled="disabled" @change="valueChange">
      <el-radio v-for="item in options" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
    </el-radio-group> -->
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: [Boolean, String],
      default: false
    },
    max: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      text: []
    }
  },
  created() {
    if (this.options.map(item => item.value).includes(this.value)) {
      this.text = [this.value]
    }
  },
  mounted() {},
  methods: {
    valueChange() {
      if (this.max === 1) {
        this.$emit('update:value', this.text[0])
      } else {
        this.$emit('update:value', this.text)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.option-radio{
  display: inline-flex;
  align-items: center;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner){
  background-color: #217DFA;
  border-color: #217DFA;
}
:deep(.el-checkbox__input.is-checked+.el-checkbox__label){
  color: #217DFA;
}
// /deep/ .el-checkbox__label{
//   padding-left: 2px;
//   font-size: 12px;
// }
// /deep/ .el-checkbox{
//   margin-right: 4px;
// }
</style>
